<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div {
            /* 高度宽度背景色快捷键 */
            /* w300+h200+bgc */
            width: 300px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
   <p class="red" id="one"></p>
   <!-- 同级+ -->
   <div></div>
   <p></p>
   <!-- 父子> -->
   <div>
    <P></P>
   </div>
   <!-- 要几个*n -->
   <ul>
    <li></li>
    <li></li>
    <li></li>
   </ul>  
   <!-- ul有三个li，li里面有文字111{文字} -->
   <ul>
    <li>111</li>
   </ul>
   <!-- ul>li{111}*2 -->
   <!-- ul>li{$}*3 -->
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
   </ul>

</body>
</html>